<template>
  <div class="padding flex direction-column height-100">
    <div class="button-group">
      <el-button type="primary" @click="add">新增</el-button>
    </div>
    <el-table
      v-loading="loading"  :data="lists" height="100%"
      :header-cell-style="{
        color: 'white',
        backgroundColor: themeColor
      }"
    >
      <div slot="empty" class="empty-lists">
        <i class="i-custom:search"></i>
        <span class="empty-text">暂无数据</span>
      </div>
      <el-table-column v-for="column in columns" :key="column.prop" v-bind="column"></el-table-column>
      <el-table-column label="操作" prop="id" align="center" width="160">
        <template #default="{ row }">
          <td-button title="编辑" @click="edit(row)">
            <i class="i-custom:editor"></i>
          </td-button>
        </template>
      </el-table-column>
    </el-table>
    <operate-modal ref="modal" :modal-data="modalData" :modal-title="modalTitle" @save-success="onSaveSuccess"></operate-modal>
  </div>
</template>

<script>
import TdButton from '@/components/td-button'
import OperateModal from '@/views/enterprise-report/data-item-manage/operate-modal'
import { selectReportContentList } from '@/api/reportContent'

export default {
  name: 'data-item-manage',
  components: { TdButton, OperateModal, },
  data () {
    return {
      loading: false,
      lists: [],
      columns: [
        { label: '名称', prop: 'name' },
        { label: '能源品种', prop: 'energyVarietiesTypeName' },
        { label: '能源种类', prop: 'energyTypeName' },
        { label: '能源用途', prop: 'energyUseName' },
      ],
      modalTitle: '',
      modalData: {},
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
  },
  mounted () {
    this.query()
  },
  methods: {
    query () {
      this.loading = true
      return selectReportContentList().then(res => {
        if (res.code === 200) {
          this.lists = res.data
        }
      }).finally(() => {
        this.loading = false
      })
    },
    onSaveSuccess () {
      this.query()
    },
    add () {
      this.modalTitle = '新增信息'
      this.modalData = {}
      this.$nextTick(() => {
        this.$refs.modal.open()
      })
    },
    edit (row) {
      this.modalTitle = '编辑信息'
      this.modalData = { ...row }
      this.$nextTick(() => {
        this.$refs.modal.open()
      })
    },
  },
}
</script>
